<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>颜色分类管理</title>
		<link rel="stylesheet" type="text/css" href="/static/basic/plugins/easyui/themes/bootstrap/easyui.css">
		<link rel="stylesheet" href="https://cdn.staticfile.org/zTree.v3/3.5.42/css/zTreeStyle/zTreeStyle.min.css">
		<link href="https://cdn.staticfile.org/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="/static/m.css" >
		<link rel="stylesheet" type="text/css" href="/static/extensions/jeasyui.extensions.base.css" >
		<style type="text/css">
			table.ets td input{width:270px}
			.ztree li a.disabled{padding-top:0; background-color:silver; color:#111; border:1px #316AC5 dotted;}
			.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
		</style>
	</head>
	<body>
		<div id="main-layout" class="easyui-layout" data-options="fit:true" style="height:620px;width:100%;">
			<div region="west" data-options="split:true" style="width:350px;height:100%">
				<div data-options="fit:true,border:false" class="easyui-panel" title="" style="padding-top:7px;padding-left:8px;">
					<div id="menuTree" class="ztree"></div>
				</div>
			</div>
			<div region="center" style="height:100%;width:100%">
				<div data-options="fit:true,border:false" class="easyui-panel" title="">
					<div data-options="fit:true,border:false" class="easyui-panel" title="编辑信息" style="padding-top:14px;padding-left:0px;">
						<form id="form0" method="post" class="easyui-form" data-options="novalidate:true">
							<table class="ets" style="height:100%;width:500px;padding-left:0px">
								<tr>
									<td>名称:</td>
									<td><input type="text" name="class_name" data-options="required:true" class="easyui-textbox"></input></td>
								</tr>
								<!-- <tr>
									<td>显示顺序:</td>
									<td><input type="text" name="order_no" data-options="prompt:'请输入数字0~999999999',required:true,max:999999999" class="easyui-numberbox"></input></td>
								</tr> -->
								<tr>
									<td>禁用:</td>
									<td>
									<input id="form0-is_disabled" class="easyui-switchbutton" name="is_disabled" value="0" data-options="onText:'启用',offText:'禁用'">
									</td>
								</tr>
							</table>
							<input type="hidden" name="id"></input>
						</form>
						<div id="btnFunc" style="height:45px;padding-top:20px;padding-left:20px">
							<a id="saveButton" href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'fas fa-save mbutton'" >保存</a>
							<!-- <a id="cancelButton" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" >取消</a> -->
						</div>
					</div>

				</div>
			</div>
		</div>
		<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
		<script src="/static/basic/plugins/easyui/jquery.easyui.min.js"></script>
		<script src="https://cdn.staticfile.org/zTree.v3/3.5.42/js/jquery.ztree.all.min.js"></script>
		<script src="/static/basic/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>
		<script src="/static/extensions/jquery.jdirk.js"></script>
		<script src="/static/extensions/jeasyui.extensions.base.loading.js"></script>
		<script src="/static/init.js"></script>
<script type="text/javascript">
var queryUrl="/simple/list?id=select_pub_class_by_class_info_id";
var getUrl="/simple/map?id=select_get_sys_pub_class";
var deleteUrl="/simple/update/delete_sys_pub_class";
var addUrl="/access/post?action=287452371615744";
var updateUrl="/access/post?action=287532541542400";
var moveUrl="/access/post?action=651739023802368";
var zTreeMenu;
var readyDeleteNode;//准备删除的节点
var parentNode;//点击新增按钮是选中的父节点
var curDragNodes;//拖拽节点
var class_info_id=$.query.get("class_definition_id");
var menuRoot={ id:0, parent_id:null, class_name:"分类", open:true, drag:false, iconOpen:"https://cdn.staticfile.org/zTree.v3/3.5.01/css/zTreeStyle/img/diy/1_open.png", iconClose:"https://cdn.staticfile.org/zTree.v3/3.5.01/css/zTreeStyle/img/diy/1_close.png"};
var ztreeSeting = {
		edit: {
			enable: true,
			showRemoveBtn: function(treeId, treeNode){
				return treeNode.id!=0;
			},
			removeTitle: "删除节点",
			showRenameBtn: false,
			renameTitle: "编辑节点",
			drag: {
				autoExpandTrigger: true,//拖拽时父节点自动展开是否触发 onExpand 事件回调函数
				isCopy: false,//拖拽时, 设置是否允许复制节点,拖拽节点按下 Ctrl 或 Cmd 键复制
				isMove: true,//拖拽时, 设置是否允许移动节点
				//拖拽到目标节点时，设置是否允许移动到目标节点前面
				prev: function(treeId, nodes, targetNode) {//参数说明 treeId ,nodes Array被拖拽的节点 JSON数据集合,targetNode 拖拽时的目标节点 JSON 数据对象
					if(targetNode.id==0){
						return false;
					}
					/* var pNode = targetNode.getParentNode();
					if (pNode && pNode.dropInner === false) {
						return false;
					} else {
						for (var i=0,l=curDragNodes.length; i<l; i++) {
							var curPNode = curDragNodes[i].getParentNode();
							if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
								return false;
							}
						}
					} */
					return true;
				},
				//拖拽到目标节点时，设置是否允许移动到目标节点后面
				next: function(treeId, nodes, targetNode){
					if(targetNode.id==0){
						return false;
					}
					/* var pNode = targetNode.getParentNode();
					if (pNode && pNode.dropInner === false) {
						return false;
					} else {
						for (var i=0,l=curDragNodes.length; i<l; i++) {
							var curPNode = curDragNodes[i].getParentNode();
							if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
								return false;
							}
						}
					} */
					return true;
				},
				//拖拽到目标节点时，设置是否允许成为目标节点的子节点
				inner: function(treeId, nodes, targetNode) {
					/* if (targetNode && targetNode.dropInner === false) {
						return false;
					} else {
						for (var i=0,l=curDragNodes.length; i<l; i++) {
							if (!targetNode && curDragNodes[i].dropRoot === false) {
								return false;
							} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
								return false;
							}
						}
					} */
					return true;
				},
				
			}
		},
		view: {
			showLine : true,
			//当鼠标移动到节点上时，显示用户自定义控件
			addHoverDom: function(treeId, treeNode){
				var sObj = $("#" + treeNode.tId + "_span");
				if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
				var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
					+ "' title='新增节点' onfocus='this.blur();'></span>";
				sObj.after(addStr);
				var btn = $("#addBtn_"+treeNode.tId);
				if(btn){
					btn.bind("click", function(e){
						parentNode=treeNode;
						//console.log(e);
						//console.log(treeNode.class_name);
						EditDialog2.dialog('open');
					});
				}
			},
			//用于当鼠标移出节点时，隐藏用户自定义控件
			removeHoverDom: function(treeId, treeNode){
				$("#addBtn_"+treeNode.tId).unbind().remove();
			},
			selectedMulti: false,//设置是否允许同时选中多个节点
		},
		callback:{
			//单击
			onClick:onClick,
			//节点生成 DOM后的事件回调函数
			onNodeCreated:function(event, treeId, treeNode){
				if(treeNode.is_disabled==1){
					var aObj = $("#" + treeNode.tId + "_a");
					aObj.addClass("disabled");
				}
			},
			//节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
			beforeRemove: function(treeId, treeNode){
				readyDeleteNode=treeNode;
				$.messager.confirm('删除确认', '是否确定删除?', function(r){
					if (r){
						$.easyui.loading();
						$.ajax({
							type: "post",
							contentType:"application/json",
							url: deleteUrl,
							data:JSON.stringify({"class_info_id":class_info_id,"id":treeNode.id}),
							success: function(result){
								$.easyui.loaded();
								zTreeMenu.removeNode(readyDeleteNode,false);
								if(result.success){
									//initmenu();
									info("删除成功！");
								}else{
									$.messager.alert("提示", "删除失败！<br>"+result.message);
								}
							}
						});
					}
				});
				return false;
			},
			//节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
			beforeDrag: function(treeId, treeNodes){
				for (var i=0,l=treeNodes.length; i<l; i++) {
					if (treeNodes[i].drag === false) {
						curDragNodes = null;
						return false;
					} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
						curDragNodes = null;
						return false;
					}
				}
				curDragNodes = treeNodes;
				return true;
			},
			//节点拖拽操作结束的事件回调函数
			/**
			moveType String 指定移动到目标节点的相对位置
			"inner"：成为子节点，"prev"：成为同级前一个节点，"next"：成为同级后一个节点
			如果 moveType = null，表明拖拽无效
			**/
			onDrop:function(event, treeId, treeNodes, targetNode, moveType, isCopy) {
				if(moveType==null){
					return;
				}
				$.easyui.loading();
				$.post(moveUrl,{node:treeNodes[0].id,target:targetNode.id,moveType:moveType},function(result){
					$.easyui.loaded();
					if(result.success){
						info("移动节点成功！");
						
					}else{
						initmenu();
						$.messager.alert("提示", "移动节点失败！");
					}
				});
			},
		},
		data: {
			key:{
				name:"class_name"//节点名称的属性名称
			},
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "parent_id",
				rootPId: null
			}
		}

};

var comboboxDatas;
//document ready
$(function(){
	$('#addButton').bind('click', addMenu);//添加按钮绑定事件
	$('#deleteButton').bind('click', deleteMenu);//添加按钮绑定事件
	$('#saveButton').bind('click', saveMenu);//保存按钮绑定事件
	
	initmenu();
	comboboxDatas={"is_disable":[{"code_name":"禁用","code_value":"1"},{"code_name":"启用","code_value":"0"}]};
	initComboboxDatas();
	//=[{'id':'enabled','text':'启用'},{'id':'disable','text':'禁用'}]
	/*$.ajax({
		type: "post",
		contentType:"application/json",
		url: "/security/grid/column/mall_goods_class",
		data:null,
		dataType:"json",
		success: function(result){
			if(result.success){
				comboboxDatas=result.data;
				initComboboxDatas();
			}
			
		},
		error: function(){
			
		}
	});*/
	EditDialog2=$("<div/>").appendTo("body").dialog({
		title:"新增色号分类",
		cls:"m-dialog",
		width:'400px',
		//height:windowHeight*0.8,
		height:'300px',
		//href:'/grid/form/insert/view?grid_id=215',
		href:'add.html',
		modal:true,
		closed:true,
		//maximized:true,
		onClose:function(){
			console.log('onClose');
			
		},
		onBeforeClose:function(){//
			console.log('onBeforeClose');
			$("#form1").form('clear');
			//$("#smartwizard").data("smartWizard").options.anchorSettings.enableAllAnchors=false;
			//$('#smartwizard').smartWizard('reset');
		},
		 buttons: [{
			text:'保存&关闭',
			iconCls:'fas fa-save mbutton',
			handler:function(){
				addSubmit(true);
			}
		},{
			text:'保存&继续添加',
			iconCls:'fas fa-save mbutton',
			handler:function(){
				addSubmit(false);
			}
		},{
			text:'取消',
			iconCls:'fas fa-times mbutton',
			handler:function(){
				EditDialog2.dialog('close')
			}
		}],
		onBeforeOpen:function(){
			console.log('onBeforeOpen');
			if($(this).data("panel").isLoaded){
				
			}
		},
		onOpened:function(){
			console.log('onOpened');
			let parent_id=$("#form1 :input[name=parent_id]").first();
			parent_id.val(parentNode.id);
		},
		onOpen:function(){//在onLoad之前执行
			console.log('onOpen');
			//console.log($(this).panel('options'));
			if($(this).data("panel").isLoaded){
				$(this).panel('options').onOpened();
			}
		},
		onBeforeLoad:function(){
			console.log('onBeforeLoad');
		},
		onLoad:function(){//只加载一次
			console.log('onLoad');
			//document.getElementById("id").fireEvent("click");
			$(this).panel('options').onOpened();
			//$('#lng').iCheck();
		},
	});
});
function addSubmit(isClose){
	if ($("#form1").form("enableValidation").form("validate")){
		var formObject=$("#form1").serializeObject();
		formObject.class_info_id=class_info_id;
		$.ajax({
			type: "post",
			contentType:"application/json",
			url: addUrl,
			data:JSON.stringify(formObject),
			dataType:"json",
			success: function(result){
				if(result.success){
					info("保存成功！");
					if(isClose){
						EditDialog2.dialog('close');
					}
					initmenu();
				}else{
					$.messager.alert("提示", "保存失败！");
				}
			},
			error: function(){
				$.messager.alert("提示", "请求失败！");
			}
		});
	}
}
lastSelectedNode=undefined;
function onClick(event, treeId, treeNode){
	//console.log(treeNode);
	$("#form0").form("disableValidation");
	$('#form0').form('clear');
	//$('#selectNodeName').html(treeNode.class_name);
	var nodeid=treeNode.id;
	if(nodeid){
		$.ajax({
			type: "post",
			contentType:"application/json",
			url: getUrl,
			data:JSON.stringify([nodeid]),
			success: function(result){
				if(result.success){
					$('#form0').form('load',result.data);
				}else{
					$.messager.alert("提示", result.message);
				}
			}
		});
	}
	var selectedNodes = zTreeMenu.getSelectedNodes();
	
	if(selectedNodes.length==0){
		
	}else{
		lastSelectedNode=selectedNodes[selectedNodes.length-1];
	}
}
/**
 * 初始化form表单组件
 */
function initComboboxDatas(){
	//初始化
	var status=$("#form0-is_enabled");
	//var type=$("#menuForm :input[name=type]").first();
	status.combobox({
    	panelHeight:'auto',
		editable:false,
    	valueField:'code_value',
		textField:'code_name',
        data:comboboxDatas.is_disable
    });
	
	/*type.combobox({
    	panelHeight:'auto',
		editable:false,
    	valueField:'code_value',
		textField:'code_name',
        data:comboboxDatas.type
    });*/
}

/**
 * 添加子分类
 */
function addMenu(){
	var selectedNodes = zTreeMenu.getSelectedNodes();
	//if(lastSelectedNode.level==0||selectedNodes.length==0){
		$('#form0').form('clear');
		$("#form0-is_enabled").combobox('setValue',0);
		//var newNode={name:"新建菜单"};
		var parent_id=$("#form0 :input[name=parent_id]").first();
		//var parent_name=$("#form0_parent_name");
		if(selectedNodes.length==0){//添加一级菜单
			parent_id.val(0);
			//parent_name.textbox("setValue","导航菜单");
		}else{
			var selectedNode=selectedNodes[0];
			if(selectedNode.level==0){
				parent_id.val(0);
				//parent_name.textbox("setValue","导航菜单");
			}else{
				parent_id.val(selectedNode.id);
				//parent_name.textbox("setValue",selectedNode.name);
			}
			
		}
	//}else{
	//	$.messager.alert("提示", "二级分类暂未开放！");
	//}
}
/**
 * 删除菜单
 */
function deleteMenu(){
	var selectedNodes = zTreeMenu.getSelectedNodes();
	if(selectedNodes.length==0){//添加一级菜单
		$.messager.alert("提示", "请选择删除的节点！");
	}else{
		var selectedNode=selectedNodes[0];
		if(selectedNode.isParent||selectedNode.level==0){
			//$.messager.alert("提示", "父菜单不允许删除！");
			//return;
		}
		$.messager.confirm('删除确认', '是否确定删除?', function(r){
			if (r){
				$.ajax({
					type: "post",
					contentType:"application/json",
					url: deleteUrl,
					data:JSON.stringify({"class_info_id":class_info_id,"id":selectedNode.id}),
					success: function(result){
						if(result.success){
							$.messager.alert("提示", "删除成功！<br>");
							initmenu();
						}else{
							$.messager.alert("提示", "删除失败！<br>"+result.message);
						}
					}
				});
			}
		});
		
		
	}
}
function saveMenu(){
	if ($("#form0").form("enableValidation").form("validate")){
		var formObject=$("#form0").serializeObject();
		let o=$('#form0-is_disabled').switchbutton('options');
		if(o.checked){
			formObject.is_disabled=0;
		}else{
			formObject.is_disabled=1;
		}
		var saveurl=addUrl;
		if(formObject.id){//修改
			saveurl=updateUrl;
		}else{//新增
			formObject.class_info_id=class_info_id;
			if(lastSelectedNode){
				if(lastSelectedNode.level==0){
					formObject.parent_id=0;
				}else{
					formObject.parent_id=lastSelectedNode.id;
				}
			}
		}
		
		$.ajax({
			type: "post",
			contentType:"application/json",
			url: saveurl,
			data:JSON.stringify(formObject),
			dataType:"json",
			success: function(result){
				if(result.success){
					info("保存成功！");
					initmenu();
				}else{
					$.messager.alert("提示", "保存失败！");
				}
			},
			error: function(){
				$.messager.alert("提示", "请求失败！");
			}
		});
	}
}

function initmenu(){
	$.ajax({
		type: "post",
		contentType:"application/json",
		async:false,
		url: queryUrl,
		data:JSON.stringify([class_info_id]),
		dataType:"json",
		success: function(result){
			if(result.success){
				zNodes=result.data;
				zNodes.push(menuRoot);
				zTreeMenu=$.fn.zTree.init($("#menuTree"), ztreeSeting,zNodes);
				zTreeMenu.expandAll(true);
			}
		},
		error: function(){
			
		}
	});
}
</script>
	</body>
</html>